Von DocuGenerate Die Automatisierung der Dokumentenerstellung kann Ihre Produktivität erheblich steigern, insbesondere wenn Sie mehrere Vorlagen und Datensätze verwalten. Während die Web-App von DocuGenerate eine umfassende Lösung bietet, möchten Sie möglicherweise Dokumentengenerierungs-Funktionen in Ihre eigene Bubble-Anwendung integrieren.
Deshalb haben wir ein Bubble-Plugin entwickelt, mit dem Sie die Leistung der DocuGenerate-API direkt in Ihren Bubble-Apps nutzen können. In diesem Tutorial zeigen wir, wie wir mit Bubble und unserem Plugin eine vereinfachte Version von DocuGenerate erstellt haben – ganz ohne Code!
Um ein besseres Gefühl für das zu bekommen, was wir erstellen werden, können Sie sich die Bubble- Demo-App ansehen. Die folgende Animation demonstriert eine vollständige Benutzerreise durch die Anwendung, von der Vorlagenerstellung bis zur Dokumentgenerierung und zum Download.
Die typische Benutzerreise folgt diesen Schritten:
Dieser Workflow spiegelt die Kernfunktionalität der Web-App von DocuGenerate wider, ist jedoch vollständig in Bubble implementiert. Die nahtlose Integration zwischen Bubbles visueller Entwicklungsplattform und der DocuGenerate-API schafft eine leistungsstarke und dennoch zugängliche Dokumentengenerierungslösung.
Bevor wir mit dem Erstellen unserer App beginnen, müssen wir die Entwicklungsumgebung vorbereiten. Bubbles visuelle Plattform macht diesen Prozess einfach, aber es gibt einige wesentliche Schritte:
Das DocuGenerate-Bubble-Plugin bietet einen umfassenden Satz von API-Aufrufen, die die Funktionalität unserer REST-API widerspiegeln. Diese sind in zwei Typen kategorisiert:
Diese werden verwendet, um Informationen aus Ihrem DocuGenerate-Konto abzurufen:
Diese werden verwendet, um Ressourcen in Ihrem DocuGenerate-Konto zu erstellen, zu ändern oder zu löschen:
Das Verständnis dieser API-Aufrufe ist wesentlich, da sie das Rückgrat unserer Demo-Anwendung bilden. Im Verlauf dieses Tutorials werden wir die meisten dieser Aufrufe verwenden, um einen vollständig funktionsfähigen Dokumentengenerierungs-Workflow zu erstellen.
Bevor wir uns mit den einzelnen Seiten befassen, richten wir die Navigationsstruktur ein, die alle Teile unserer Anwendung verbindet. Ein einheitliches Navigationssystem ist entscheidend für ein reibungsloses Benutzererlebnis. Wir haben eine einfache Navigationsleiste erstellt, die oben auf jeder Seite erscheint und Folgendes enthält:
Diese Navigationsstruktur spiegelt den in der eigentlichen Web-App von DocuGenerate verwendeten Ansatz wider und bietet eine vertraute Erfahrung für Benutzer, die unsere Hauptplattform bereits kennen. Das bekannte Layout hilft Benutzern, intuitiv durch die Anwendung zu navigieren, ohne dass zusätzliche Anweisungen erforderlich sind.
Die Dashboard-Seite dient als zentraler Hub unserer Anwendung und bietet Benutzern sofort einen Überblick über alle verfügbaren Vorlagen. Da dies der erste Bildschirm ist, den Benutzer beim Öffnen der App sehen, ist er sowohl informativ als auch intuitiv gestaltet und ermöglicht schnellen Zugriff auf die wichtigsten Funktionen.
Wie in der Web-Oberfläche von DocuGenerate haben wir Vorlagen in einem visuell ansprechenden Rasterlayout organisiert, das Vorlagenvorschauen neben ihren Namen anzeigt. Dieser visuelle Ansatz macht es einfach, die gesuchte Vorlage schnell zu finden, auch wenn Dutzende verschiedener Vorlagen verwaltet werden.
Die Schlüsselkomponente ist die RepeatingGroup, die sich automatisch mit allen Vorlagen aus Ihrem DocuGenerate-Konto füllt. Dieser dynamische Ansatz stellt sicher, dass das Dashboard immer die aktuellste Vorlagenliste anzeigt, ohne manuelle Updates zu erfordern.
Jede Vorlage im Raster ist anklickbar und navigiert zu einer detaillierten Ansicht dieser spezifischen Vorlage. Das Dashboard integriert sich auch nahtlos mit unserer Navigationsleiste, die die New Template-Schaltfläche für den schnellen Zugriff auf die Vorlagenerstellung enthält.
Auf dieser Seite beginnen Benutzer den Dokumentengenerierungsprozess, indem sie ein Word-Dokument hochladen, das als Vorlage dient. Dieser entscheidende Schritt legt die Grundlage für alle nachfolgende Dokumentgenerierung, da die hochgeladene Vorlage die Struktur, Formatierung und Merge-Tags enthält, die bei der Generierung von Dokumenten verwendet werden.
Wir haben diese Seite so gestaltet, dass sie unkompliziert und fokussiert ist, unnötige Ablenkungen beseitigt und Benutzer durch den Vorlagenerstellungsprozess führt. Die Oberfläche kommuniziert klar, was erforderlich ist (ein Word-Dokument und ein Name), und gibt sofortiges Feedback, wenn die Vorlage erfolgreich erstellt wurde.
file-Parameter über die dynamische Link-Option übergebenname-Parameter übergeben 
Dieses optimierte Formular übernimmt alles, was zum Erstellen einer Vorlage in DocuGenerate erforderlich ist. Die FileUploader-Komponente bietet eine native Möglichkeit für Benutzer, Dateien von ihrem Gerät auszuwählen, mit Drag-and-Drop-Unterstützung und klarem visuellem Feedback.
Nach der Erstellung der Vorlage schafft die automatische Navigation zur Vorlage-Detailseite einen nahtlosen Übergang zum nächsten Schritt im Workflow. Diese durchdachte Benutzerreise beseitigt die Notwendigkeit, manuell zwischen Seiten zu navigieren.
Die Vorlage-Detailseite dient als zentraler Hub für die Verwaltung einer bestimmten Vorlage und aller daraus generierten Dokumente. Diese Seite vereint wesentliche Vorlageninformationen mit Dokumentverwaltungsfunktionen und bietet eine umfassende Ansicht der Nutzung und Ausgabe jeder Vorlage.
Im Gegensatz zu den einfacheren Seiten, die wir bisher erstellt haben, integriert die Vorlage-Detailseite mehrere Datenquellen und interaktive Elemente, um eine komplexere und funktionalere Oberfläche zu schaffen. Wir haben diese Elemente sorgfältig organisiert, um trotz der erhöhten Komplexität Klarheit zu bewahren.
id-Parameter auf die template_id aus der URL gesetzt. 
template_id-Parameter gesetztdocument_uri zum Herunterladen 
Der leistungsstärkste Aspekt dieser Seite ist die Art und Weise, wie das Group-Element die Datenquelle nutzt, um allen untergeordneten Elementen Vorlagendaten zur Verfügung zu stellen. Dieses Muster, manchmal als „Datenvererbung” in Bubble bezeichnet, stellt sicher, dass alle Elemente auf der Seite automatisch aktualisiert werden, wenn eine andere Vorlage ausgewählt wird.
Die Dokumentenliste bietet eine chronologische Ansicht aller aus dieser Vorlage generierten Dokumente, mit den neuesten Dokumenten oben. Jeder Dokumenteintrag enthält einen direkten Download-Link, sodass Benutzer schnell auf ihre generierten Dateien zugreifen können.
Die prominente „+”-Schaltfläche dient als klarer Call-to-Action und führt Benutzer zum Dokumentgenerierungsprozess. Beim Klicken navigiert sie zur Dokumentgenerierungsseite und übergibt die Vorlagen-ID, um den Kontext beizubehalten.
Hier kommt die eigentliche Stärke der Dokumentgenerierung zum Ausdruck und ermöglicht es Benutzern, ihre Daten mit Vorlagen zu verbinden, um angepasste Dokumente zu erstellen. Wir haben diese Seite so gestaltet, dass sie leistungsstark und dennoch zugänglich ist und erweiterte Funktionalität mit einer klaren Oberfläche in Einklang bringt.
Diese Seite behält die visuelle Konsistenz mit der Vorlage-Detailseite bei und zeigt dieselben Vorlageninformationen oben an, um Kontext zu liefern. Dadurch können Benutzer bestätigen, dass sie mit der richtigen Vorlage arbeiten, bevor sie mit der Dokumentgenerierung fortfahren.
template_id aus der URL 
Das MultiLine-Eingabefeld ist besonders wichtig, da es eine flexible Möglichkeit für Benutzer bietet, ihre JSON-Daten einzugeben. Dieser Ansatz unterstützt sowohl einfache Datenstrukturen für grundlegende Dokumente als auch komplexe verschachtelte Objekte oder Arrays für anspruchsvollere Generierungsszenarien.
Das Ausgabeformat-Dropdown demonstriert einen der Hauptvorteile von DocuGenerate: die Fähigkeit, Dokumente in mehreren Formaten aus einer einzigen Vorlage zu generieren. Benutzer können das Format wählen, das ihren Anforderungen am besten entspricht, sei es ein PDF für die formale Verteilung, ein DOCX für weitere Bearbeitung oder ein anderes Format für spezifische Anwendungsfälle.
Nach der Generierung des Dokuments navigiert die Seite automatisch zur Vorlage-Detailseite zurück, wo das neu erstellte Dokument oben in der Liste erscheint. Dieses sofortige Feedback bestätigt, dass die Generierung erfolgreich war.
Obwohl unsere Demo-App die wesentliche Funktionalität für die Dokumentgenerierung bietet, gibt es viele Möglichkeiten, sie zu erweitern:
Diese Erweiterungen würden unsere Demo-App von einem Proof of Concept zu einer vollständig ausgestatteten Dokumentengenerierungslösung transformieren. Das Schöne an Bubbles visueller Entwicklungsplattform ist, dass diese Funktionen schrittweise hinzugefügt werden können, sodass die Anwendung zusammen mit den Benutzeranforderungen wachsen kann.
Das Erstellen einer Dokumentengenerierungs-App mit Bubble und dem DocuGenerate-Plugin demonstriert die Stärke der No-Code-Entwicklung in Kombination mit spezialisierten APIs. Die von uns erstellte Demo-App dient sowohl als Proof of Concept als auch als Ausgangspunkt für Ihre eigenen Dokumentenautomatisierungs- projekte. Durch die Nutzung von Bubbles visueller Entwicklungsplattform und den Dokumentengenerierungs- fähigkeiten von DocuGenerate können Sie maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen erstellen, ohne eine einzige Zeile Code schreiben zu müssen.
Dieser Ansatz ist besonders wertvoll für Unternehmen ohne dedizierte Entwicklungsteams oder für solche, die Dokumentengenerierungs-Workflows schnell prototypisieren und iterieren möchten. Die visuelle Natur von Bubble macht es für Business-Analysten, Betriebsspezialisten und andere nicht-technische Teammitglieder zugänglich und befähigt sie, Lösungen zu erstellen, die ihre Dokumentenautomatisierungsherausforderungen direkt angehen.
Ob Sie interne Tools für Ihr Team oder kundenseitige Anwendungen erstellen, dieser Ansatz bietet eine schnelle und flexible Möglichkeit, Dokumentengenerierungsfunktionen zu implementieren. Die Kombination aus Bubbles intuitiver Oberfläche und der leistungsstarken API von DocuGenerate schafft eine Synergie, die ausgeklügelte Dokumentenautomatisierung für Organisationen jeder Größe zugänglich macht.
Geben Sie Ihre E-Mail-Adresse ein, um den aktuellen Newsletter von DocuGenerate zu erhalten
Erfahren Sie, wie Sie konforme Factur-X-Hybrid-PDF-Rechnungen mit eingebetteten XML-Dateien erstellen. Entdecken Sie die Anforderungen, Standards und Implementierungsansätze für ZUGFeRD, Factur-X und andere E-Rechnungsformate in Europa und weltweit.
Transformieren Sie Ihre Rechtspraxis mit automatisierter Schriftsatzerstellung. Lernen Sie, wie Sie mit Make, Typeform und DocuGenerate einen effizienten Workflow erstellen, der Mandantenaufnahmedaten in professionell formatierte Schriftsätze umwandelt.
DocuGenerate ist stolz, den Top-Performer-Award in der Kategorie PDF-Generatoren von SourceForge, der weltweit größten Software-Review- und Vergleichswebsite, gewonnen zu haben. Wir sind geehrt, von unseren Kunden geschätzt und mit diesem Award ausgezeichnet zu werden.